echarts 自定义、覆盖legend点击事件，禁用legend默认的点击行为

您所在的位置：网站首页 › echarts 点击某个图例,图表 › echarts 自定义、覆盖legend点击事件，禁用legend默认的点击行为

echarts 自定义、覆盖legend点击事件，禁用legend默认的点击行为

2024-07-06 01:45| 来源: 网络整理| 查看: 265

有一个需求场景，使用echarts时想要自定义legend的点击事件，但是不要legend的默认点击事件——就是点击会隐藏和显示对应的饼图

查阅文档和手册之后，发现没有可以直接使用的方法

那么换个思路，在默认事件触发之后再把取消选中的legend选中回来就可以啦

依赖以下下几个配置：

1. legendselectchanged myChart.on('legendselectchanged', function (params) { // ... });

监听legend点击改变的事件，可以实现自定义事件，但是不能覆盖默认的选中和取消选中的事件

2. selected option = { tooltip: { selected: { // ... }, // ... }, //... }

可以设置初始选中项，这里不会直接使用

3. setOption myChart.setOption({ legend:{ selected:{ //... } })

动态改变配置，到这里就很清晰了，将 legendselectchanged 中取消选中的legend动态设置回来

4. animation option = { animation: false, //... }

如果对动画没要求，关闭动画，效果会更好

完整html代码 ECharts 实例 var myChart = echarts.init(document.getElementById('main')); option = { animation: false, // 取消动画 tooltip: { trigger: 'item', formatter: '{a} {b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] }; myChart.setOption(option); // 关键代码 myChart.on('legendselectchanged', function (params) { myChart.setOption({ legend:{selected:{[params.name]: true}} }) console.log('点击了', params.name); // do something });

【本文地址】

echarts 自定义、覆盖legend点击事件，禁用legend默认的点击行为

echarts 自定义、覆盖legend点击事件，禁用legend默认的点击行为

今日新闻

推荐新闻